import React, { useEffect, useState } from 'react'
import { Statistic, Card, Row, Col } from 'antd';
// import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import { getDashBoard } from '@/services/dashboard'

export default function DashBoard() {
  const [data, setData]: any = useState({});

  useEffect(() => {
    getDashBoard().then(res => {
      // console.log('res: ', res);
      setData(res);
    });
  }, [])

  return (
    <div className="site-statistic-demo-card">
      <Row gutter={16}>
        <Col span={8}>
          <Card>
            <Statistic
              title="用户数"
              value={data.users_count}
              precision={0}
              valueStyle={{ color: '#3f8600' }}
              // prefix={<ArrowUpOutlined />}
              suffix="个"
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="商品数"
              value={data.goods_count}
              precision={0}
              valueStyle={{ color: '#cf1322' }}
              // prefix={<ArrowDownOutlined />}
              suffix="件"
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="订单数"
              value={data.order_count}
              precision={0}
              valueStyle={{ color: '#234abc' }}
              // prefix={<ArrowDownOutlined />}
              suffix="件"
            />
          </Card>
        </Col>
      </Row>
    </div>
  )
}
